<template>
  <my-dv-page v-bind="$attrs">
    <my-dv-header3>
      <my-dv-title type="primary" strong shadow x-align="center">广西农信数据可视化大屏</my-dv-title>
    </my-dv-header3>
    <my-dv-box layout :gap="20" top="100px" left="20px" width="calc(100% - 40px)" height="calc(100% - 120px)">
      <my-dv-box width="100%" :weight="2" layout direction="column" :gap="20">
        <my-dv-box layout :gap="20" height="100%">
          <my-dv-border9 width="100%">
            <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">系统交易情况</my-dv-title>
            <my-dv-box layout :gap="0" top="50px" height="calc(100% - 40px)" width="100%">
              <my-dv-box v-for="(items,index) in chart1" :key="index" layout width="100%" direction="column">
                <my-dv-box v-for="(item,key) in items" :key="key" height="100%" content-align="center">
                  <my-dv-number :value="item.value" :level="3" :position="false"
                                :percentage="item.percentage"></my-dv-number>
                  <my-dv-text :level="4" :position="false" type="secondary">{{ item.label }}</my-dv-text>
                </my-dv-box>
              </my-dv-box>

            </my-dv-box>
          </my-dv-border9>
          <my-dv-border9 width="100%">
            <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">全省技术比中流转情况</my-dv-title>
            <my-dv-ring fit :columns="pie.columns" :rows="pie.rows" legend="v"></my-dv-ring>
          </my-dv-border9>
        </my-dv-box>
        <my-dv-border9 height="100%" :weight="3">
          <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">全区各地区交易情况</my-dv-title>
          <my-dv-loading v-if="loading"></my-dv-loading>
          <my-dv-geo-gl v-else fit :json="map.json" :columns="map.columns" :rows="map.rows" :extend="extendMap" :type="map.type"
                     :visual="map.visual" ></my-dv-geo-gl>
          <my-dv-menu :data="menus" :default-active="menuActiveIndex" @click="handleMenuClick" top="0px" right="70px"
                      :zoom="0.7"></my-dv-menu>
        </my-dv-border9>
        <my-dv-box layout :gap="20" height="100%">
          <my-dv-border9 width="100%">
            <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">全省技术比中流转情况</my-dv-title>
            <my-dv-list scroll
                        top="30px"
                        width="100%"
                        height="260px"
                        :columns="list.columns"
                        :rows="list.rows"></my-dv-list>
          </my-dv-border9>
          <my-dv-border9 width="100%">
            <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">全省技术比中流转情况</my-dv-title>
            <my-dv-list scroll
                        top="30px"
                        width="100%"
                        height="260px"
                        :columns="list2.columns"
                        :rows="list2.rows"></my-dv-list>
          </my-dv-border9>
        </my-dv-box>
      </my-dv-box>
      <my-dv-box width="100%" layout direction="column" :gap="20">
        <my-dv-border9 height="100%">
          <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">全省技术比中流转情况</my-dv-title>
          <my-dv-bar fit :columns="bar.columns" :rows="bar.rows" :extend="extend" legend></my-dv-bar>
        </my-dv-border9>
        <my-dv-border9 height="100%">
          <my-dv-title :level="6" left="10px" top="10px" :extend="extend" shadow strong type="primary">全省技术比中流转情况
          </my-dv-title>
          <my-dv-line fit :columns="line.columns" :rows="line.rows" :extend="extend" legend
                      :settings="line.settings"></my-dv-line>
        </my-dv-border9>
      </my-dv-box>
    </my-dv-box>


  </my-dv-page>
</template>
<script>
import china from '$ui/charts/geo/province/guangxi.json'

export default {
  data() {
    return {
      chart1: [
        [{
          label: '核心系统',
          value: 12383
        }, {
          label: '农信银前置',
          value: 12383
        }],
        [{
          label: '网银前置',
          value: 12383
        }, {
          label: '超级网银',
          value: 12383
        }],
        [{
          label: '二代支付',
          value: 1
          // percentage: true
        }, {
          label: '短信通',
          value: 0.86
        }]
      ],
      pie: {
        columns: ['渠道', '访问量'],
        rows: [
          ['直接访问', 320],
          ['邮件营销', 302],
          ['联盟广告', 334]
        ]
      },
      bar: {
        columns: ['星期', '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        rows: [
          ['周一', 3200000, 302, 301, 334, 390, 330, 320],
          ['周二', 120, 132, 101, 134, 90, 230, 210],
          ['周三', 220, 182, 191, 234, 290, 330, 310],
          ['周四', 150, 212, 201, 154, 190, 3300000, 410],
          ['周五', 320, 132, 401, 334, 290, 330, 320]
        ]
      },
      line: {
        columns: ['月份', '直接访问', '搜索引擎'],
        rows: [
          ['一月', 100000, 1000000],
          ['二月', 1000000, 2000000],
          ['三月', 3800000, 2500000],
          ['四月', 2000000, 3000000],
          ['五月', 1100000, 3000000],
          ['六月', 3700000, 3000000],
          ['七月', 3000000, 3600000],
          ['八月', 7500000, 450000],
          ['九月', 3300000, 3600000],
          ['十月', 3000000, 3000000],
          ['十一月', 3000000, 3500000],
          ['十二月', 1050000, 3600000]
        ],
        settings: {
          stack: ['直接访问', '搜索引擎']
        }
      },
      map: {
        json: china,
        type: 'map3D',
        columns: ['办事处', '核心交易量'],
        rows: [
          ['南宁市', 100],
          ['柳州市', 60],
          ['玉林市', 78],
          ['桂林市', 90],
          ['北海市', 110],
          ['百色市', 87],
          ['河池市', 90],
          ['梧州市', 75],
          ['钦州市', 63]
        ],
        visual: {
          show: true,
          color: ['#1de2ff', 'rgba(24,144,255,0.13)']
        }
      },
      list: {
        columns: ['业务系统', 'TPS'],
        rows: [
          ['核心业务系统', '89%'],
          ['农信银前置系统', '89%'],
          ['人行现代支付系统', '89%'],
          ['跨行支付清算系统', '89%'],
          ['网上银行前置系统', '89%'],
          ['短信通系统', '89%'],
          ['外联中间业务系统', '89%']
        ]
      },
      list2: {
        columns: ['业务系统', '交易量'],
        rows: [
          ['核心业务系统', '89%'],
          ['农信银前置系统', '89%'],
          ['人行现代支付系统', '89%'],
          ['跨行支付清算系统', '89%'],
          ['网上银行前置系统', '89%'],
          ['短信通系统', '89%'],
          ['外联中间业务系统', '89%']
        ]
      },
      menus: [
        // {text: '年', width: 150},
        // {text: '月', width: 150},
        {text: '今日交易量:701232', width: 250}
      ],
      menuActiveIndex: 0,
      loading: true,
      extend: {
        yAxis: {
          axisLabel: {
            formatter: function (value, index) {
              console.log(value + 'first')
              if (value >= 10000) {
                value = value / 10000 + '万';
              }
              return value;
            }
          },
          type: 'value'
        }
      },
      extendMap: {
        tooltip: {
          show: true,
          formatter: function ({seriesName, name, value}) {
            console.log(value)
            // console.log(value[2])
            return `${seriesName}<br>${name}: ${value}`
          }
        }
      }
    }
  },
  methods: {
    handleMenuClick(item, index) {
      console.log(index)
      this.menuActiveIndex = index
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 500)
  },
  typeHelper({type}) {
    if (type === 'map3D') {
      return {
        label: {
          show: true,
          formatter: '{b}:{@[2]}',
          position: 'top'
        }
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.my-dv-page {
  background-image: url("~$ui/assets/bg/03.jpg");
  background-size: cover;
}

.my-dv-list {

  /deep/ {
    td, th {
      text-align: center;
    }
  }
}

.my-dv-menu {
  /deep/ {
    .my-dv-menu-item {
      margin-left: -50px;
    }
  }
}
</style>
